<%--
  Created by IntelliJ IDEA.
  User: yrq
  Date: 2019/6/17
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../css/style.css">

</head>

<body id="body">
<!-- Start Top Header Bar -->
<jsp:include page="common/top-header.jsp"/>
<!-- End Top Header Bar -->


<!-- Main Menu Section -->
<jsp:include page="common/main-menu.jsp"/>

<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content">
                    <h1 class="page-name">Search</h1>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="single-product">
    <div class="container">
        <div class="row mt-20">
            <div class="col-md-5">
                <div class="single-product-slider">
                    <div id='carousel-custom' class='carousel slide' data-ride='carousel'>
                        <div class='carousel-outer'>
                            <!-- me art lab slider -->
                            <div class='carousel-inner '>
                                <c:forEach items="${products}" var="product">
                                <c:if test="${products.indexOf(product)==0}">
                                <div class="item active">
                                    </c:if>
                                    <c:if test="${products.indexOf(product)!=0}">
                                    <div class="item">
                                        </c:if>
                                        <img src='${product.img}' alt=''
                                             data-zoom-image="images/shop/single-products/product-1.jpg"/>
                                    </div>
                                    </c:forEach>

                                </div>

                                <!-- sag sol -->
                                <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
                                    <i class="tf-ion-ios-arrow-left"></i>
                                </a>
                                <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
                                    <i class="tf-ion-ios-arrow-right"></i>
                                </a>
                            </div>

                            <!-- thumb -->
                            <ol class='carousel-indicators mCustomScrollbar meartlab'>
                                <c:forEach items="${products}" var="product" >
                                    <li data-target='#carousel-custom' data-slide-to='${products.indexOf(product)}' class='active'>
                                        <img src='${product.img}' alt='' onclick="findFavoriteId(${product.id})"/>
                                    </li>
                                </c:forEach>

                            </ol>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="single-product-details">
                        <h2 id="f_name">${products.get(0).name}</h2>
                        <p class="product-price" id="f_price">$${products.get(0).price}</p>

                        <p class="product-description mt-20" id="f_memo">${products.get(0).memo}</p>
                        <%--<p>${product.memo}</p>--%>
                        <div class="color-swatches">
                            <span>color:</span>
                            <p id="f_color">${products.get(0).color}</p>
                        </div>
                        <div class="product-size">
                            <span>Size:</span>
                            <select class="form-control">
                                <option>S</option>
                                <option>M</option>
                                <option>L</option>
                                <option>XL</option>
                            </select>
                        </div>
                        <div class="product-category">
                            <span>Categories:</span>
                            <ul>
                                <li><a href="#">Products</a></li>
                                <li><a href="#">Soap</a></li>
                            </ul>
                        </div>
                        <div>
                            <a id="f_delete" href="/favorite/delete.do?p_id=${products.get(0).id}" class="btn btn-main mt-20">Don't Like</a>
                            <a id="f_insert" onclick="insertCart(${products.get(0).id})" class="btn btn-main mt-20">Add To Cart</a>
                        </div>
                    </div>
                </div>
            </div>

<!-- Modal -->
<jsp:include page="common/modal.jsp"/>

<!-- Footer -->
<jsp:include page="common/footer.jsp"></jsp:include>

<a class="btn btn--success btn--floating box-shadow-wide" target="_blank" href="#products/aviato-e-commerce-template/">
    <span class="btn__text">
        Purchase Full Template Pack
    </span>
</a>


<!--
Essential Scripts
=====================================-->


<!-- Main jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Instagram Feed Js -->
<script src="../../plugins/instafeed.js/instafeed.min.js"></script>
<!-- Slick Carousel -->
<script src="../../plugins/slick-carousel/slick/slick.min.js"></script>
<!-- Google Map js -->


<!-- Main Js File -->
<script src="../../js/script.js"></script>

<script type="text/javascript">
    function findFavoriteId(id) {
        $.ajax({
            type: "POST",
            url: "/shop/findId.do",
            data: {"id":id},
            success: function(msg){
                $("#f_name").text(msg.name)
                $("#f_memo").text(msg.memo)
                $("#f_color").text(msg.color)
                $("#f_price").text("$"+msg.price)
                $("#f_insert").attr("onclick","insertCart("+msg.id+")")
                $("#f_delete").attr("href","/favorite/delete.do?p_id="+msg.id);
            }
        });
    }
</script>

</body>
</html>
